<template>
    <div id="accounts">
        <div class="container">
            <div class="headerTop">
                <div class="title">
                    <div class="txt">
                        <i class="address"></i>
                        <div class="ps">
                            <p class="lj">
                                <span>欣才IT学院4楼A区 欣才IT学校</span>
                            </p>
                            <p class="name">
                                <span>王羽</span>
                                173****0341
                            </p>
                        </div>
                        <i class="ow"></i>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="ls">
                    <div class="lw">
                        <div class="left">
                            <span class="tic">达达专送</span>
                        </div>
                        <div class="right">
                            <div class="op">
                                <p> 立即送达 19:55-20:55 </p>
                                <div class="m3">
                                    <span style="color: #FF5757">恶劣天气延长时效，请耐心等待哦!</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="jg">
                    <p class="m5">
                        <span class="text">沃尔玛-秦淮店</span>
                    </p>
                    <ul class="list list1">
                        <dl class="t1" v-for="val in checkIdArr2[shop_id]" :key="val.id">
                            <dt>
                                <img :src="imgUrl+val.img" alt="">
                            </dt>
                            <dd>
                                <p class="goodsName">{{val.title}}</p>
                                <div class="goodsPrice">
                                    <div>
                                        <span>
                                            ￥{{val.price}}×{{val.num}}
                                        </span>
                                    </div>
                                    <div>
                                        <span>
                                            ￥{{(val.price*val.num).toFixed(1)}}
                                        </span>
                                    </div>
                                </div>
                            </dd>
                        </dl>
                    </ul>
                    <div class="md" @click="showHidden">
                        共{{totalNum}}件 / {{totalNum*0.75}}kg
                        <i :class="['fa','fa-caret-down',length>2?'':'hide']" v-show="caretShow"></i>
                        <i :class="['fa','fa-caret-up',length>2?'':'hide']" v-show="!caretShow"></i>
                    </div>
                    <div class="me">
                        <p>商品金额</p>
                        <div class="clickBox">
                            <p style="color:#0F0F0F">￥{{totalPrice}}</p>
                        </div>
                    </div>
                    <div class="me">
                        <p>
                            配送费
                            <span class="nl"></span>
                        </p>
                        <div class="clickBox">
                            <p style="color:#0F0F0F">￥{{send}}</p>
                        </div>
                    </div>
                    <div class="l2">
                        <div class="l2Top">
                            <i class="l3"></i>
                            <span class="l4">配送员很辛苦，送{{tea==0?2:tea}}元茶水钱</span>
                            <i class="l0" @click="poor"></i>
                        </div>
                        <ul class="hide">
                            <li class="tipTag" value="1" @click="cutActive($event)">1元</li>
                            <li class="tipTag active" value="2" @click="cutActive($event)">2元</li>
                            <li class="tipTag" value="5" @click="cutActive($event)">5元</li>
                        </ul>
                    </div>
                    <div class="me">
                        <p>
                            配送优惠
                            <span class="nl"></span>
                        </p>
                        <div class="clickBox">
                            <p style="color:#999">暂无优惠</p>
                        </div>
                    </div>
                    <div class="me">
                        <p>红包</p>
                        <div class="clickBox">
                            <p style="color:#999">暂无红包</p>
                        </div>
                    </div>
                    <div class="me">
                        <p>优惠券</p>
                        <div class="clickBox">
                            <p style="color:#999">暂无优惠券</p>
                        </div>
                    </div>
                    <p class="total">
                        <span class="totalPrice">&nbsp;实付金额<span class="rmb">￥</span><span class="price">{{shifu}}</span></span><br/>
                        <span class="n2">(秒杀品不计入满（件）减、打包门槛)</span>
                    </p>
                </div>
                <div class="pb">
                    <div class="pc">
                        号码保护
                        <span class="nl"></span>
                    </div>
                    <div class="pd">对商家、骑手隐藏您的真实手机号，保护您的隐私</div>
                    <div class="pe">
                        <input type="checkbox" checked class="pf checkedPf" @click="cutCheck">
                    </div>
                </div>
                <div class="nu">
                    <span>添加订单备注</span>
                </div>
            </div>
            <div class="acFoot">
                <a class="nc" @click="subForm">提交订单</a>
            </div>
            <div class="bottomAdress">
                <div class="n5">配送至:&nbsp;欣才IT学院4楼A区 欣才IT学校</div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    props:['shop_id'],
    created(){
        $(window).scroll(function(){
            var v=($(this).scrollTop())/250;
            if(v>=1){
                $('.bottomAdress').css('bottom',$('.acFoot').height()+'px')
            }else{
                $('.bottomAdress').css('bottom','0')
            }
        })
    },
    data(){
        return {
            caretShow:true,
            tea:0
        }
    },
    computed:{
        totalNum(){
            var num=0;
            $(this.checkIdArr2[this.shop_id]).map((index,val)=>{
                num+=val.num;
            })
            return num;
        },
        totalPrice(){
            var price=0;
            $(this.checkIdArr2[this.shop_id]).map((index,val)=>{
                price+=val.price*val.num;
            })
            return price.toFixed(1);
        },
        send(){
            return 6.5+this.tea;
        },
        shifu(){
            return (Number(this.totalPrice)+Number(this.send)).toFixed(1);
        },
        length(){
            return $('.t1').length;
        }
    },
    methods:{
        showHidden(){
            if(this.totalNum<=2){
                return;
            }else{
                if(this.caretShow){
                    this.caretShow=false;
                    $('.list').toggleClass('list1');
                    $('.list').css('max-height',this.checkIdArr2[this.shop_id].length*171+'px');
                }else{
                    this.caretShow=true;
                    $('.list').css('max-height','');
                    $('.list').toggleClass('list1')
                }
            }
        },
        poor(){
            $('.l0').toggleClass('checked')
            $('.l2 ul').toggleClass('hide')
            if(!$('.l0').hasClass('checked')){
                this.tea=0;
            }else{
                this.tea=2;
            }
        },
        cutActive(e){
            $('.tipTag').removeClass('active');
            $(e.target).addClass('active');
            this.tea=e.target.value;
        },
        cutCheck(){
            $('.pf').toggleClass('checkedPf');
            $('.pf').toggleClass('notCheckedPf');
        },
        scroll(){
            console.log(1);
        },
        subForm(){
            let obj={shifu:this.shifu,totalNum:this.totalNum};
            this.checkIdArr2[this.shop_id].push(obj);
            this.$delete(this.cars[this.shop_id],'carNum');
            this.$delete(this.cars,this.shop_id);
            console.log(this.cars[this.shop_id]);
            this.$router.push('/form');
        }
    }
}
</script>

<style scoped lang='scss'>
.container {
    background-color: #f4f4f4;
    .headerTop {
        background: #49b34d;
        color: #fff;
        padding: 35px 58px 105px;
        font-size: 37px;
        .title {
            text-align: center;
            .txt {
                justify-content: space-between;
                display: flex;
                .address {
                    width: 32px;
                    height: 42px;
                    display: inline-block;
                    vertical-align: middle;
                    margin: 7px 23px 0 0;
                    background: url(/static/home/address_2x.png) no-repeat;
                    background-size: 32px 42px;
                }
                .ps {
                    -webkit-box-flex: 1;
                    flex: 1;
                    text-align: left;
                    .lj {
                        text-overflow: ellipsis;
                        overflow: hidden;
                        -webkit-line-clamp: 2;
                        display: box;
                        -webkit-box-orient: vertical;
                        margin: 0 23px 28px 0;
                        font-size: 37px;
                        line-height: 48px;
                        span {
                            display: block;
                        }
                    }
                    .name {
                        padding: 0;
                        margin: 0;
                        span {
                            display: inline-block;
                            margin-right: 35px;
                        }
                    }
                }
                .ow {
                    margin-top: 11px;
                    display: inline-block;
                    width: 14px;
                    height: 23px;
                    background: url(/static/home/nextonebai@3x.png) no-repeat center;
                    background-size: cover;
                }
            }
        }
    }
    .body {
        padding-bottom: 257px;
        overflow-x: hidden;
        margin-top: -70px;
        .ls {
            background: #fff;
            margin: 0 23px 35px;
            padding: 0 35px;
            border-radius: 11px;
            box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.07);
            .lw {
                height: 93px;
                position: relative;
                padding: 23px;
                font-size: 35px;
                color: #333;
                white-space: nowrap;
                .left {
                    line-height: 93px;
                    position: absolute;
                    left: 0;
                    height: 93px;
                    width: 30%;
                    font-size: 28px;
                    .tic {
                        color: #fff;
                        margin-right: 7px;
                        display: inline-block;
                        padding: 0 7px;
                        font-size: 23px;
                        height: 32px;
                        line-height: 32px;
                        border-radius: 9px 2px;
                        margin-top: 5px;
                        background: -webkit-linear-gradient(left top, #4C9CFF, #2486FF);
                    }
                }
                .right {
                    position: absolute;
                    right: 0;
                    height: 93px;
                    width: 70%;
                    .op {
                        position: absolute;
                        left: 0;
                        width: 90%;
                        height: 93px;
                        text-align: right;
                        font-size: 28px;
                        p{
                            margin: 0;
                            padding: 9px 0 0 0;
                            color:#2486FF;
                        }
                        .m3{
                            color:#262626;
                            font-size: 28px;
                            line-height: 40px;
                            text-align: right;
                            -webkit-box-flex:1;
                            flex: 1;
                        }
                    }
                }
            }
        }
        .jg{
            padding: 35px 35px 0;
            box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.07);
            margin: 0 23px;
            background:#fff;
            border-radius: 7px;
            .m5{
                text-align: center;
                font-size: 35px;
                border: 3px solid #e8e8e8;
                border-right: none;
                border-left: none;
                height: 4px;
                position: relative;
                margin: 23px 0 46px;
                .text{
                    position: absolute;
                    padding: 0 28px;
                    background: #fff;
                    color:#333;
                    display: inline-block;
                    max-width:75%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    top: -23px;
                    left: 50%;
                    white-space: nowrap;
                    transform: translateX(-50%);
                }
            }
            .list{
                margin: 0;
                padding: 0;
                max-height: 342px;
                transition: max-height .5s ease-in-out .1s;
                overflow: hidden;
                list-style: none;
                .t1{
                    padding: 23px 0;
                    min-height: 117px;
                    dt{
                        float: left;
                        width: 117px;
                        height: 117px;
                        margin-right: 23px;
                        position: relative;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 9px;
                            border:0;
                        }
                    }
                    dd{
                        margin-left: 140px;
                        .goodsName{
                            margin: 0;
                            padding: 0;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 32px;
                        }
                        .goodsPrice{
                            display: flex;
                            -webkit-box-align:center;
                            align-items:flex-end;
                            justify-content:space-between;
                            padding: 23px 0 7px 0;
                            font-size: 32px;
                        }
                    }
                }
            }
            .list1{
                max-height:400px;
            }
            .md{
                text-align: center;
                background:#f7f7f7;
                height: 61px;
                line-height: 61px;
                margin-bottom: 46px;
                color:#888;
                font-size: 32px;
            }
            .me{
                margin-bottom: 50px;
                line-height: 1.2;
                color:#333;
                font-size: 32px;
                display: -webkit-box;
                -webkit-box-align: center;
                align-items: center;
                -webkit-box-pack: justify;
                justify-content: space-between;
                p{
                    margin: 0;
                    padding: 0;
                    .nl{
                        width: 30px;
                        height: 30px;
                        background: url(/static/home/icon_question.png) no-repeat;
                        background-size: 30px;
                        display: inline-block;
                        vertical-align: middle;
                        background-origin: content-box;
                        padding: 0 9px 9px 9px;
                    }
                }
                .clickBox{
                    display:-webkit-box;
                }
            }
            .l2{
                transform: translateY(-46px);
                width: 100%;
                line-height: 72px;
                min-height: 70px;
                font-size: 28px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                .l2Top{
                    height: 74px;
                    display: -webkit-box;
                    -webkit-box-align:center;
                    background:url(/static/home/freight_tip.png) no-repeat;
                    background-size: 100% 100%;
                    padding-top: 11px;
                    .l3{
                        display: -webkit-box;
                        width: 48px;
                        height: 48px;
                        margin: 0 11px 0 7px;
                        background:url(/static/home/freight_icon@2x.png) no-repeat;
                        background-size: 48px;
                    }
                    .l4{
                        position: relative;
                        -webkit-box-flex:1;
                        display: -webkit-box;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .l0{
                        display: -webkit-box;
                        width: 37px;
                        height: 37px;
                        vertical-align: top;
                        padding: 0 16px;
                        background:url(/static/home/icon_checkbox_none.png) no-repeat center;
                        background-size: 37px;
                    }
                    .checked{
                        background:url(/static/home/icon_checked.png) no-repeat center;    
                        background-size: 37px;                    
                    }
                }
                ul{
                    float: left;
                    padding: 4px 40px 4px 65px;
                    background: #FFFDEC;
                    margin: -4px 0 0 0;
                    border: 3px solid #F7F3CE;
                    border-top: none;
                    border-radius: 0 0 4px 4px;
                    width: -webkit-fill-available;
                    list-style: none;
                    .tipTag{
                        float: left;
                        height: 46px;
                        width: 81px;
                        font-size: 23px;
                        border: #979797 3px solid;
                        color:#333;
                        margin-right: 16px;
                        text-align: center;
                        line-height: 46px;
                        border-radius: 4px;
                        margin-bottom: 23px;
                    }
                    .active{
                        color:#fff;
                        background: #47B34F;
                        border: #47B34F 3px solid;
                    }
                }
            }
            .total{
                text-align: right;
                font-family: Arial;
                padding: 44px 0;
                line-height: 1;
                border-top: 1px solid #e8e8e8;
                font-size: 0;
                word-break: break-all;
                position: relative;
                .totalPrice{
                    font-size: 32px;
                    .rmb{
                        margin-left: 11px;
                        font-size: 30px;
                        font-weight: bold;
                        display: inline-block;
                    }
                    .price{
                        font-size: 50px;
                        font-weight: bold;
                    }
                }
                .n2{
                    font-size: 25px;
                    color:#999;
                    display: inline-block;
                    padding-top: 11px;
                }
            }
        }
        .pb{
            margin: 23px 23px 0 23px;
            border-radius: 7px;
            background-color: #fff;
            box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.07);
            padding: 23px 154px 23px 35px;
            position: relative;
            .pc{
                font-size: 32px;
                height: 42px;
                font-weight: 500;
                color:#333;
                line-height: 42px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                .nl{
                    width: 30px;
                    height: 30px;
                    background: url(/static/home/icon_question.png) no-repeat;
                    background-size: 30px;
                    display: inline-block;
                    vertical-align: middle;
                    background-origin: content-box;
                    padding: 0 9px 9px 9px;
                }
            }
            .pd{
                height: 35px;
                font-size: 25px;
                color:#999;
                line-height: 35px;
                margin-top: 11px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .pe{
                width: 84px;
                height: 100%;
                position: absolute;
                right: 35px;
                top: 0;
                .pf{
                    background-color: rgba(0,0,0,0);
                    background-position: -206px -721px;
                    position: absolute;
                    outline: none;
                    border-radius: 50px;
                    height: 100%;
                    width: 100%;
                    vertical-align: top;
                    -webkit-tap-highlight-color:rgba(0,0,0,0);
                    display: inline-block;
                    -webkit-appearance:none;
                    &::before{
                        content:'';
                        display: block;
                        border-radius: 50px;
                        height: 50px;
                        width: 84px;
                        position: absolute;
                        top: 50%;
                        margin-top: -25px;
                        transition: all 0.3s ease;
                    }
                    &::after{
                        content:'';
                        position: absolute;
                        top: 50%;
                        margin-top: -23px;
                        left: 3px;
                        width: 46px;
                        height: 46px;
                        border-radius: 46px;
                        background: #fff;
                        transition: all 0.3s ease;
                    }
                }
                .checkedPf{
                    &::before{
                        content:'';
                        background-color: #47b34f;
                    }
                    &::after{
                        content:'';
                        transform: translateX(32px);
                    }
                }
                .notCheckedPf{
                    &::before{
                        content:'';
                        background-color:#eee;
                    }
                    &::after{
                        content:'';
                        transform: translateX(0);
                    }
                }
            }
        }
        .nu{
            text-align: center;
            margin-top: 50px;
            font-size: 30px;
            color:#666;
            margin-bottom: 35px;
            span{
                display: inline-block;
                color:#666;
                height: 100%;
                max-width:243px;
                vertical-align: middle;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .acFoot{
        background:#f4f4f4;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 152px;
        z-index: 99;
        .nc{
            position: absolute;
            display: block;
            left: 23px;
            right: 23px;
            bottom: 46px;
            background:#47b34f;
            text-align: center;
            z-index: 99;
            color:#fff;
            height: 105px;
            line-height: 105px;
            border-radius: 11px;
            font-size: 46px;
            box-shadow: 0 7px 28px rgba(59,202,70,0.43)
        }
    }
    .bottomAdress{
        bottom: 0px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        width: 95%;
        position: fixed;
        right: 2.5%;
        background: #FDF4D0;
        border-radius: 9px;
        padding: 18px 0;
        transition: bottom 0.5s linear;
        .n5{
            font-size: 32px;
            padding: 0;
            width: 92%;
            margin-left: 4%;
            color:#d97900;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
        }
    }
    .hide{
        display: none;
    }
}
</style>
